<template>
	<view class="box">
		<view class="dope">
			<view class="list" v-for="(item,index) in data" :key="index">
				<view class="get-time">
					<view class="time">{{item.reply?item.reply_time:item.create_time}}</view>
				</view>
				<view class="dope-cont">
					<view class="title">{{item.title}}</view>
					<view class="content"><text>{{i18n.reply}}：</text>{{item.reply || i18n.notReply}} </view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadStatus" v-if="data != ''"></uni-load-more>
		<no-record v-if="data == ''"></no-record>
	</view>
</template>

<script>
	import NoRecord from "@/components/NoRecord.vue"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore,NoRecord
		},
		data() {
			return {
				data: [],
				page: 1,
				pageMore: false, //能否触发下一页事件
				loadStatus: 'more'
			}
		},
		onLoad() {
			this.getMore()
		},
		//滚动条触底事件
		onReachBottom() {
			if (this.pageMore) {
				this.page++;
				this.getMore()
			}
		},
		onShow(){
			uni.setNavigationBarTitle({
			 title: this.$t('dope.messageCenter')
			})
		},
		computed:{
			i18n() {
				return this.$t('dope');
			}
		},
		methods: {
			getMore() {
				if (this.page == 1) {
					this.data = uni.getStorageSync('feedback')
				}
				this.$post('api/feedback/list', {
					page: this.page
				}).then(res => {
					if (res.code == 200) {
						if (this.page == 1) {
							this.data = res.data.data
							uni.setStorageSync('feedback', res.data.data);
						} else {
							this.data.push(...res.data.data);
						}
						
						if (res.data.has_more) {
							this.pageMore = true;
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
							this.pageMore = false;
						}
					} else {
						this.$toast(res.msg)
					}
				}).catch(res=>{
					this.loadStatus = 'noMore'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.box{
	}
	.dope {
		padding: 30upx 30upx 0;
		.list {
			margin-bottom: 60upx;
		}
	}
	.get-time{
		text-align: center;
		margin-bottom: 20upx;
		.time{
			display: inline-block;
			background: var(--border);
			color: var(--txt-color);
			font-size: 24upx;
			padding: 10upx 30upx;
			border-radius: 24upx;
		}
	}
	.dope-cont{
		background: #F0F5FF;
		border-radius: 10upx;
		padding-bottom: 30upx;
		.title{
			font-size: 28upx;
			font-weight: bold;
			padding: 20upx 20upx 0;
			line-height: 1.6;
		}
		.content{
			font-size: 24upx;
			color: #bbb;
			padding: 10upx 20upx 0;
			line-height: 1.6;
			text{
				color: #666;
			}
		}
	}
</style>
